<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>用户列表</title>
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <script src="js/vue.js"></script>
      <script src="element-ui/lib/index.js"></script>
      <style>
        .el-header{
          background-color: #99CCFF;
        }
        .header-img{
          width: 50px;
          margin-top: 7px;
		  border-radius: 30px;
        }
      </style>
  </head>
  <body>
    <div id="div">
      <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
          <el-container>
            <div>
              <el-image src="img/timg.jpg" class="header-img" ></el-image>
            </div>
            <el-menu
              :default-active="activeIndex2"
              mode="horizontal"
              @select="handleSelect"
              background-color="#99CCFF"
              text-color="white"
              active-text-color="#ffd04b"
              style="margin-left: auto;">
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item index="3"><a href="用户列表.html" target="_self">首页</a></el-menu-item>
            </el-menu>
          </el-container>
        </el-header>
      </el-container>
	  <el-container style="height: 580px; border: 1px solid #eee">
	      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
	          <el-menu :default-openeds="['1']">
	              <el-submenu index="1">
	                  <template slot="title"><i class="el-icon-menu"></i>学工部</template>
	                  <el-menu-item-group>
	                      <el-menu-item index="1-1"><i class="el-icon-help"></i>在校用户管理</el-menu-item>
	                      <el-menu-item index="1-2"><i class="el-icon-help"></i>用户升级/留级</el-menu-item>
	                      <el-menu-item index="1-3"><i class="el-icon-help"></i>用户就业情况</el-menu-item>
	                  </el-menu-item-group>
	              </el-submenu>
	              <el-submenu index="2">
	                  <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
	                  <el-menu-item-group>
	                      <el-menu-item index="2-1"><i class="el-icon-help"></i>意向用户管理</el-menu-item>
	                      <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名用户管理</el-menu-item>
	                      <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名用户管理</el-menu-item>
	                  </el-menu-item-group>
	              </el-submenu>
	              <el-submenu index="3">
	                  <template slot="title"><i class="el-icon-menu"></i>教研部</template>
	                  <el-menu-item-group>
	                      <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
	                      <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
	                      <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
	                  </el-menu-item-group>
	              </el-submenu>
	          </el-menu>
	      </el-aside>
	  <el-main>
	      <b style="color: red;font-size: 20px;">用户列表</b>
	      <div style="float:right">
	          <el-button type="primary">添加用户</el-button>
	      </div>
	      <el-table :data="tableData">
	          <el-table-column prop="date" label="手机号" width="140">
	          </el-table-column>
	          <el-table-column prop="name" label="姓名" width="120">
	          </el-table-column>
	          <el-table-column prop="address" label="地址">
	          </el-table-column>
	          <el-table-column
	                           label="编辑"
	                           width="100">
	              <el-button type="warning" icon="el-icon-star-off">编辑</el-button>
	          </el-table-column>
			  <el-table-column
			                   label="删除"
			                   width="100">
			      <el-button type="danger" icon="el-icon-star-off">删除</el-button>
			  </el-table-column>
	      </el-table>
	  </el-main>
	  </el-container>

	  
    </div>
  </body>
<script>
	function getParams(key) {
		var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		}
		return null;
	};


    new Vue({
        el:"#div",
        data:{
          tableData:[
            {
              date:"1365855005",
              name:"巨魔",
              address:"巨神峰"
            },{
              date:"2365855015",
              name:"布隆",
              address:"弗雷尔卓德"
            },{
              date:"3365855025",
              name:"凯影",
              address:"暗影岛"
            },
          ]
        },
		mounted(){
			var phone = getParams("phone");
			console.log("参数param1:"+phone);//输出aa
        	console.log("phone = "+ phone)
		}

    });
</script>
  </html>